<template>
  <Modal v-model="showModal">
    <div class="clearfix">
      <div class="arrow arrow-left" v-show="imgIndex !== 0">
        <SvgIcon
          icon-class="leftArrow"
          popper-class="arrow-icon"
          @click="emits('update:imgIndex', imgIndex - 1)"
        />
      </div>
      <img class="img-browser" :src="imgs[imgIndex]" alt="" />
      <div class="arrow arrow-right" v-show="imgIndex !== imgsLen - 1">
        <SvgIcon
          icon-class="rightArrow"
          popper-class="arrow-icon"
          @click="emits('update:imgIndex', imgIndex + 1)"
        />
      </div>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from "vue";
import Modal from "@/components/ui-components/modal.vue";

const props = defineProps<{
  modelValue: boolean;
  imgs: Array<string>;
  imgIndex: number;
}>();

const emits = defineEmits<{
  (e: "update:modelValue", show: boolean): void;
  (e: "update:imgIndex", index: number): void;
}>();

const imgsLen = computed(() => props.imgs.length);

/**
 * 是否打开图片浏览组件(本组件)
 */
const showModal = ref<boolean>(props.modelValue);

watch(
  () => showModal.value,
  (show) => emits("update:modelValue", show)
);

watch(
  () => props.modelValue,
  (show) => (showModal.value = show)
);
</script>

<style lang="scss" scoped>
.arrow {
  color: #fff;
  height: 420px;
  line-height: 420px;

  &-left {
    float: left;
    margin-right: 8px;
  }

  &-right {
    float: right;
    margin-left: 8px;
  }

  &-icon {
    @include setWidHei(50px, 40px);
    cursor: pointer;
  }
}
</style>
